<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>

<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/css/updateVideo.css"/>
    <link rel="stylesheet" href="<%=basePath %>/css/list.css">
    <link href="<%=basePath %>/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="<%=basePath %>/css/formsCSS.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/css/simditor.css"/>

    <!-- select start -->
    <link href="<%=basePath %>/lib/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="<%=basePath %>/css/multiple-select.css" rel="stylesheet" type="text/css"/>
    <!-- select end -->

    <script src="<%=basePath%>/lib/My97DatePicker/WdatePicker.js"></script>
    <script src="<%=basePath %>/js/jquery.min.js"></script>
    <script src="<%=basePath %>/js/formsJS.js"></script>
    <script src="<%=basePath %>/js/jquery.form.js"></script>
    <script type="text/javascript" src="<%=basePath %>/js/module.js"></script>
    <script type="text/javascript" src="<%=basePath %>/js/hotkeys.js"></script>
    <script type="text/javascript" src="<%=basePath %>/js/uploader.js"></script>
    <script type="text/javascript" src="<%=basePath %>/js/simditor.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/H-ui.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/laydate/laydate.js"></script>
    <script src="<%=basePath%>/js/multiple-select.js"></script>

    <script type="text/javascript">


        //选中下拉框选择的值
        function choice() {
            var type = document.getElementById('type').value;
            if (type == 1) {
                $("#divcourseId").show();
                $("#divcardId").hide();
            } else if (type == 3) {
                $("#divcourseId").hide();
                $("#divcardId").show();
            } else {
                $("#divcourseId").hide();
                $("#divcardId").hide();
            }
        };
    </script>
</head>
<body>
<div class="connect_wrap">
    <h3 style="text-align: center;">添加分销活动课程</h3>
    <div class="row cl" style="max-width:88%;margin-left:8%;">
        <div class="labelText"></div>
        <form id="configForm" method="post"
              enctype="multipart/form-data" action="<%=basePath %>distribution/addGoods">
            <div class="col-sm-4"></div>
            <div class="col-sm-4">
                <div class="boxs">
                    <div style="width:90%;margin-top:30px;">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">课程类别
                        </div>
                        <select id="type" name="goodsSort" class="selectBox" onchange="choice()"
                                required="required">
                            <option value="1">课程
                            </option>
                            <option value="3">课程包
                            </option>
                        </select>
                    </div>
                    <div style="width:90%;margin-top:30px" id="divcourseId">
                        　
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择课程
                        </div>

                        <select id="courseIds" name="courseId" class="selectBox">
                            <c:forEach items="${courses}" var="c">
                                <option value="${c.id}">${c.id}:${c.courseName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div style="width:90%;margin-top:30px;display:none;" id="divcardId">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择课程包
                        </div>

                        <select id="cardIds" name="cardId" class="selectBox">
                            <c:forEach items="${cards}" var="c">
                                <option value="${c.id}">${c.id}:${c.cardName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div style="width:90%;margin-top:30px;">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">有效日期
                        </div>
                        <input name="rangeTime" type="text" class="inputBox" id="date" readonly="readonly"/>
                    </div>
                    <input type="text" class="inputBox" placeholder="普通推广员佣金比例" name="commissionRate"
                           onkeyup="value=value.replace(/[^\d]/g,'')"/>
                    <input type="text" class="inputBox" placeholder="高级推广员佣金比例" name="highCommissionRate"
                           onkeyup="value=value.replace(/[^\d]/g,'')"/>
                    <input type="submit" value="确定" class="true"/>
                    <input type="button" class="false" value="取消" onclick="window.history.go(-1)">
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">

    $(function () {
        laydate.render({
            elem: '#date'
            , type: 'datetime'
            , range: true
        });
    });

    $(function () {
        var type = document.getElementById('type').value.trim();
        if (type == 1) {
            $("#divcourseId").show();
            $("#divcardId").hide();
        } else if (type == 3) {
            $("#divcourseId").hide();
            $("#divcardId").show();
        } else {
            $("#divcourseId").show();
            $("#divcardId").hide();
        }
    });
</script>

</html>